<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心灵树洞 - 说出你的烦恼，让心情得到释放</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <div class="container">
        <!-- 页面头部 -->
        <header class="header">
            <h1 class="title">🌳 心灵树洞</h1>
            <p class="subtitle">说出你的烦恼，让心情得到释放</p>
        </header>

        <!-- 匿名保证说明 -->
        <div class="privacy-notice">
            <div class="notice-icon">🔒</div>
            <div class="notice-content">
                <h3>完全匿名保护</h3>
                <p>这是一个<strong>完全匿名</strong>的平台，我们不会记录你的任何个人信息（包括IP地址），请放心倾诉。你的隐私和安全是我们最重要的承诺。</p>
            </div>
        </div>

        <!-- 倾诉表单 -->
        <form id="messageForm" class="message-form">
            <!-- 问题分类选择 -->
            <div class="category-section">
                <h3>选择问题类型 <span class="required">*</span></h3>
                <div class="category-options">
                    <label class="category-option">
                        <input type="radio" name="category" value="学业压力" required>
                        <span class="category-label">📚 学业压力</span>
                    </label>
                    <label class="category-option">
                        <input type="radio" name="category" value="人际关系" required>
                        <span class="category-label">👥 人际关系</span>
                    </label>
                    <label class="category-option">
                        <input type="radio" name="category" value="家庭烦恼" required>
                        <span class="category-label">🏠 家庭烦恼</span>
                    </label>
                    <label class="category-option">
                        <input type="radio" name="category" value="未来迷茫" required>
                        <span class="category-label">🌅 未来迷茫</span>
                    </label>
                    <label class="category-option">
                        <input type="radio" name="category" value="其他情绪" required>
                        <span class="category-label">💭 其他情绪</span>
                    </label>
                </div>
            </div>

            <!-- 内容输入区域 -->
            <div class="content-section">
                <h3>倾诉你的心声 <span class="required">*</span></h3>
                <textarea 
                    id="messageContent" 
                    name="content" 
                    placeholder="在这里写下你想说的话...&#10;&#10;无论是学习的压力、人际的困扰、家庭的烦恼，还是对未来的迷茫，都可以在这里倾诉。我们会认真倾听你的每一个字，你并不孤单。&#10;&#10;请放心表达，这里是你的安全港湾。"
                    maxlength="2000"
                    required></textarea>
                <div class="char-counter">
                    <span id="charCount">0</span> / 2000 字
                </div>
            </div>

            <!-- 提交按钮 -->
            <div class="submit-section">
                <button type="submit" id="submitBtn" class="submit-btn">
                    <span class="btn-text">💌 发送我的心声</span>
                    <span class="btn-loading" style="display: none;">📤 正在发送...</span>
                </button>
            </div>
        </form>

        <!-- 温馨提示 -->
        <div class="tips-section">
            <h3>💡 温馨提示</h3>
            <ul class="tips-list">
                <li>你的每一份倾诉都会被认真对待</li>
                <li>如果遇到紧急情况，请及时寻求专业帮助</li>
                <li>记住，困难是暂时的，你比想象中更坚强</li>
                <li>学会关爱自己，也要相信明天会更好</li>
            </ul>
        </div>

        <!-- 页面底部 -->
        <footer class="footer">
            <p>💝 用心倾听，用爱陪伴 | 心灵树洞 © 2024</p>
        </footer>
    </div>

    <!-- 成功提示模态框 -->
    <div id="successModal" class="modal">
        <div class="modal-content">
            <div class="modal-icon">🌟</div>
            <h3>感谢你的信任</h3>
            <p id="successMessage">你的声音我们已收到，愿你心情阳光灿烂！</p>
            <button id="closeModal" class="modal-btn">好的</button>
        </div>
    </div>

    <!-- 错误提示模态框 -->
    <div id="errorModal" class="modal">
        <div class="modal-content error">
            <div class="modal-icon">⚠️</div>
            <h3>提交失败</h3>
            <p id="errorMessage">网络连接异常，请稍后重试</p>
            <button id="closeErrorModal" class="modal-btn">重试</button>
        </div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>